<template>
	<view class="contentBox">
		<image class="headImage" src="/static/headImage.png" mode="aspectFill"></image>
		<view class="infoBox">
			<view class="name">悦咖音乐</view>
			<view class="contactWay">
				<view class="item" @click="showWeixin">
					<uni-icons class="icon" type="chatboxes" size="26"></uni-icons>
					<text>微信</text>
				</view>
				<view class="item" @touchend="callPhone">
					<uni-icons class="icon" type="phone" size="26"></uni-icons>
					电话
				</view>
			</view>
			<view class="addressBox" @touchend="openMap">
				<view class="address">
					<text>河北省邯郸市邯山区赵都新城三号地景和园东门北行30米路西</text>
					<uni-icons class="icon" type="location" size="26"></uni-icons>
				</view>
			</view>
		</view>

		<view class="tabs">
			<view class="tab" :class="{'select': index == mi_index}" v-for="(item, index) in musicalInstruments"
				:key="index" @touchend="mi_index = index">
				<text>{{item.icName}}</text>
				<view class="line" />
			</view>
		</view>

		<view class="introduce">
			<view v-html="musicalInstruments[mi_index]?.description" />
		</view>

		<view class="openClass">
			<view class="title">
				公开课
			</view>
			<view class="dayOfWeekBox">
				<view v-for="(item, index) in openClassInfo" :key="index">
					{{item.dayOfWeek}}
				</view>
			</view>
			<view class="dateBox">
				<view class="box" v-for="(item, index) in openClassInfo" @touchend="oc_index = index;getOpenCourse()" :key="index">
					<view class="item" :class="{'select': index == oc_index}">
						{{item.date}}
					</view>
				</view>
			</view>
			<template v-if="courses.length > 0">
				<view class="classList" v-for="item in courses" :key="item.id">
					<view class="content">
						<view class="class_name">
							{{item.courseName}}
						</view>
						<view class="time">
							{{item.schoolTime}}
						</view>
					</view>
					<view class="options">
						<view class="subscribe" @touchend="subscribe(item)">
							预约
						</view>
					</view>
				</view>
			</template>
			<view class="classList" style="border: none;">
				今天没有排课哦！
			</view>
		</view>


		<view class="environment">
			<view class="title">
				教学环境
			</view>
			<scroll-view class="nav-scroll" scroll-x>
				<image class="img" v-for="(item, index) in 4" :key="index" src="/static/headImage.png" mode="aspectFill"></image>
			</scroll-view>
		</view>
		
		<view class="teachList">
			<view class="title">
				师资力量
			</view>
			<scroll-view class="nav-scroll" scroll-x>
				<view class="item" v-for="(item, index) in teachers" :key="index">
					<image class="img" :src="item.avatar" mode="aspectFill"></image>
					<view class="name">
						{{ item.teacherName }}
					</view>
					<view class="job">
						{{ item.instrumentNames }}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="activityList">
			<view class="title">
				琴行活动
			</view>
			<view>
				<view class="item" v-for="item in activities" :key="item.id" @click="toDetail(item)">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="name">
						{{item.activityName}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onShow
	} from '@dcloudio/uni-app'
	import erCode from "/static/ercode.jpg"
	import { http } from '@/utils/http.js'
	const userInfo = ref({})
	const openMap = () => {
		uni.openLocation({
			latitude: 36.58588,
			longitude: 114.47646,
			name: "悦咖音乐工作室",
			address: "河北省邯郸市邯山区赵都新城三号地景和园东门北行30米路西"
		})
	}

	const showWeixin = () => {
		uni.previewImage({
			urls: [erCode]
		});
	}

	const callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: '17531331349' //仅为示例
		});
	}


	const mi_index = ref(0)
	const musicalInstruments = ref([])

	function getNextSevenDays() {
		const today = new Date();
		const result = [];

		for (let i = 0; i < 7; i++) {
			const nextDay = new Date(today);
			nextDay.setDate(today.getDate() + i);

			const year = nextDay.getFullYear();
			const month = String(nextDay.getMonth() + 1).padStart(2, '0');
			const date = String(nextDay.getDate()).padStart(2, '0');
			const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][nextDay.getDay()];

			result.push({
				date: date,
				dayOfWeek: dayOfWeek,
				submitDate: `${year}-${month}-${date}T00:00:00`,
			});
		}

		return result;
	}
	const oc_index = ref(0)
	const openClassInfo = ref(getNextSevenDays())
	const courses = ref([])
	const teachers = ref([])
	const activities = ref([])
	const openCourses = ref([])
	
	const getOpenCourse = () => {
		console.log(openClassInfo.value[oc_index.value].submitDate)
		http({
			url: "/courseRecord/openCourse",
			method: 'get',
			params: {
				date: openClassInfo.value[oc_index.value].submitDate
			}
		}).then(res => {
			console.log(res)
			courses.value = res.data
		})
	}
	
	const subscribe = (item) => {
		if(!uni.getStorageSync("userInfo")){
			uni.navigateTo({
				url:"/pages/login/login"
			})
			uni.showToast({
			  title: '请先登陆！',
			  icon: 'none'
			});
			return
		}
		http({
			url: '/courseRecord/subscribe',
			method: "get",
			params: {
				studentId: userInfo.value.id,
				courseId: item.id
			}
		}).then(res => {
			uni.showToast({
			  title: '预约成功',
			  icon: 'success'
			});
		})
	}
	
	onShow(() => {
		const storageInfo = uni.getStorageSync("userInfo")
		if (storageInfo) {
			userInfo.value = JSON.parse(storageInfo)
		}
		http({
			url: "/teacher/list",
			method: 'get',
			params: {status: '1' ,page: 1, pageSize: 100},
		}).then(res => {
			console.log(res)
			teachers.value = res.data.list
		})
		http({
			url: "/activity/list",
			method: 'get',
			params: {status: '1' ,page: 1, pageSize: 100},
		}).then(res => {
			console.log(res)
			activities.value = res.data.list
		})
		http({
			url: "/instrumentCategory/list",
			method: 'get'
		}).then(res => {
			musicalInstruments.value = res.data
		})
		getOpenCourse()
	})
	
	const toDetail = (row) => {
		uni.setStorageSync("AcDesc", row.description)
		uni.navigateTo({
			url:"/pages/activityDetail/activityDetail"
		})
	}
	
</script>

<style lang="scss" scoped>
	.contentBox {
		background-color: #fafafa;
	}

	.headImage {
		width: 100vw;
		background: black;
	}


	.infoBox {
		position: relative;
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-top: -40rpx;
		font-size: 30rpx;
		color: #2c2c2c;
		z-index: 1;

		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.contactWay {
			display: flex;
			justify-content: start;
			margin-bottom: 20rpx;

			.item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					margin-right: 10rpx;
				}
			}
		}

		.addressBox {
			padding: 30rpx;
			background-color: #eff1f6;
			border-radius: 20rpx;

			.address {
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					margin: 0 0 0 30rpx;
				}
			}
		}
	}

	.tabs {
		padding: 30rpx;
		display: flex;
		color: #2c2c2c;

		.tab {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 90rpx;

			.line {
				width: 30rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}

		.select {
			color: #ed8202;

			.line {
				background-color: #ed8202;
			}
		}
	}

	.introduce {
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-bottom: 30rpx;

		.img {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.openClass {
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-bottom: 30rpx;

		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.dayOfWeekBox {
			display: flex;

			view {
				flex: 1;
				text-align: center;
			}
		}

		.dateBox {
			display: flex;
			margin-top: 10rpx;

			.box {
				flex: 1;
				display: flex;
				justify-content: center;

				.item {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
				}

				.select {
					background-color: #ed8202;
				}
			}
		}

		.classList {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			color: #76797c;
			padding: 20rpx;
			border: 1px dashed #abadaf;
			border-radius: 10rpx;

			.img {
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.options {
				flex: .3;
				text-align: center;

				.subscribe {
					background-color: #ed8202;
					color: white;
					padding: 6px;
					text-align: center;
					border-radius: 8rpx;
				}
			}
		}
	}

	.environment {
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.nav-scroll {
			white-space: nowrap;
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			position: relative;
			z-index: 2;
			.img{
				margin-right: 20rpx;
				border-radius: 6rpx;
			}
		}
	}
	
	.teachList {
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
	
		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.nav-scroll {
			white-space: nowrap;
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			position: relative;
			z-index: 2;
			.item{
				display: inline-block;
				.img{
					margin-right: 20rpx;
					border-radius: 6rpx;
					width: 200rpx;
					height: 250rpx;
				}
				.name{
					text-align: center;
					font-weight: bold;
				}
				.job{
					text-align: center;
					font-size: 12px;
					color: #abadaf;
				}
			}
			
		}
	}
	.activityList{
		background: white;
		padding: 30rpx;
		border-radius: 30rpx;
			
		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.item{
			position: relative;
			image{
				width: 100%;
				border-radius: 20rpx;
			}
			.name{
				position: absolute;
				top: 0rpx;
				color: white;
				padding: 20rpx;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 20rpx 0 20rpx 0;
				font-size: 12px;
			}
		}
	}
</style>